<template>
  <el-main>
    <div class="topBox">
      <div class="rigth">
        <el-button type="primary" @click="excellentImport = true">导入</el-button>
        <el-button type="primary" @click="dialogAdd = true">添加</el-button>
        <div>
          <el-input
            v-model="keyword"
            clearable
            style="width: 300px; margin-left: 15px"
            placeholder="搜索公司、联系人"
            class="input-with-select"
            @change="getuserList"
          >
            <el-button
              slot="append"
              style="background-color: #45a321; color: #fff; border-radius: 0"
              @click="getuserList"
            >
              搜索
            </el-button>
            <i slot="prefix-icon" class="el-icon-search" />
          </el-input>
        </div>
      </div>
      <el-button type="primary" @click="exportFile">导出</el-button>
    </div>

    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" align="center" label="ID"> </el-table-column>
        <el-table-column prop="company" align="center" label="公司名称">
        </el-table-column>
        <el-table-column prop="into_time" align="center" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" class="deletText" @click="DellCompany(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 10px"
        :current-page="page"
        :page-size="limit"
        @current-change="currentChange"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog :visible.sync="excellentImport" width="25%" :destroy-on-close="true">
      <div>
        <div>
          <div style="margin-bottom: 30px">
            <div class="sq_tilte4 sq_tilte_color" style="margin-bottom: 20px">
              1.请先下载导入文件
            </div>
            <el-button type="primary" style="padding: 8px 20px">
              <a :href="`https://visit.oramage.com/template/公司导入模板.xlsx`"
                >下载模板</a
              >
            </el-button>
          </div>
          <div style="margin-bottom: 30px">
            <div class="sq_tilte4 sq_tilte_color" style="margin-bottom: 20px">
              2.请上传填写好的文件
            </div>
            <el-upload
              class="upload-demo"
              :action="action"
              :on-success="handleChange"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :file-list="fileListUpload"
              :limit="limitUpload"
            >
              <el-button type="primary" style="padding: 7px 34px"> 上传 </el-button>
            </el-upload>
          </div>
        </div>
        <div>
          <el-button
            class="pubBtn"
            style="width: 100%; margin: 40px 0; height: 44px"
            type="button"
            @click="enterExe"
          >
            导入
          </el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="是否确认要删除该监控企业？"
      :visible.sync="dialogDellabel"
      @close="cancel"
      width="30%"
    >
      <div slot="footer" class="dialog-footer">
        <div style="display: flex; justify-content: flex-end">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="delLabel">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="添加监控企业" :visible.sync="dialogAdd" @close="cancel" width="30%">
      <el-form>
        <el-form-item label="公司名称" label-width="120px">
          <el-input v-model="companyName" ></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="companyAdd">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="导入失败列表" :visible.sync="failDialog" width="25%" :destroy-on-close="true">
      <div>
        <el-button type="primary" @click="errorList">查看导入失败列表</el-button>
        <!-- <div v-for="item in failList" style="margin-top: 5px">
          {{ item.company }}：{{ item.result }}
        </div> -->
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
import { companyList, patCompany, patCompanyAdd, patCompanyDel } from "@/api/configApi";
import { VUE_APP_BASE_API } from "@/config.js";
import { mapGetters } from "vuex";
export default {
  components: {},
  computed: {
    ...mapGetters(["type"]),
  },
  data() {
    return {
      failDialog: false,
      failList: [
      ],
      dialogAdd: false,
      dialogDellabel: false,
      action: VUE_APP_BASE_API + "/v1/config/upload_local",
      page: 1,
      limit: 10,
      total: 0,
      region_id: "",
      currentUserdata: {},
      tableData: [],
      fileListUpload: [],
      limitUpload: 1,
      excellentImport: false,
      keyword: "",

      companyId: "",
      companyName: "",
    };
  },
  async mounted() {
    this.region_id = this.$route.query.id;
    this.getuserList();
  },
  methods: {
    errorList(){
      sessionStorage.setItem("failList",JSON.stringify(this.failList) );
      let routerJump = this.$router.resolve({
        path: "/morePatents",
        query: {
          patentType: 11,
        },
      });
      window.open(routerJump.href, "_blank");
    },
    exportFile(){
      window.open(VUE_APP_BASE_API + `/v1/export/patCompany?region_id=${this.region_id}`, "_blank");
    },
    companyAdd() {
      patCompanyAdd({
        region_id: this.region_id,
        company: this.companyName,
      }).then((res) => {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.cancel()
        this.getuserList();
      });
    },
    delLabel() {
      patCompanyDel({
        region_id: this.region_id,
        pat_company_id: this.companyId,
      }).then((res) => {
        this.cancel();
        this.getuserList();
        this.$message({
          message: "删除成功",
          type: "success",
        });
      });
    },
    cancel() {
      this.companyId = "";
      (this.companyName = ""), (this.dialogDellabel = false);
      this.dialogAdd = false;
    },
    DellCompany(id) {
      this.dialogDellabel = true;
      this.companyId = id;
    },
    enterExe() {
      patCompany({
        file: this.fileListUpload[0].url,
        region_id: this.region_id,
      }).then((res) => {
        this.fileListUpload = [];
        this.excellentImport = false;
        if(res.error.length){
          this.failDialog = true
          this.failList = res.error
        }
        this.$message({
          message: "导入成功",
          type: "success",
        });
        setTimeout(async () => {
          await this.getuserList();
        }, 50);
      });
    },
    handleChange(file, fileList) {
      let obj = {
        name: file.data.file_name,
        url: file.data.url,
      };
      this.fileListUpload.push(obj);
      console.log(file, fileList, "变化");
      console.log(this.fileListUpload, "变化");
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handleRemove(file, fileList) {
      // console.log(file)
      this.fileListUpload = [];
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    currentChange(page) {
      this.page = page;
      this.getuserList();
    },
    getuserList() {
      companyList({
        page: this.page,
        limit: this.limit,
        region_id: this.region_id,
        keyword: this.keyword,
      }).then((res) => {
        this.tableData = res.list;
        this.total = res.count;
      });
    },
  },
};
</script>

<style scoped lang="less">
.topBox {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  .rigth {
    display: flex;
  }
}
.el-main {
  margin: 30px 15px;
}
</style>
